<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-touch-fullscreen" content="yes"/>
    <meta name="format-detection" content="telephone=no,email=no"/>
    <meta name="screen-orientation" content="portrait" />
    <meta name="full-screen" content="yes" />
    <meta name="x5-fullscreen" content="true" />
    <title>关注礼包</title>
    <link rel="stylesheet" href="css/element_2.4.7.css"/>
    <link rel="stylesheet/less" href="css/common.less"/>
</head>
<body>
    <div id="app">
        <!--顶部-->
        <div class="top">
            <span>爱健康&nbsp;&nbsp;爱生活</span>
            <a href="javascript:history.go(-1);" class="return">
                <span class="return-arrow"></span>
                <span>返回&nbsp;关闭</span>
            </a>
            <a href="#" class="oprate"></a>
        </div>

        <!--头部标题-->
        <div class="head">{{headTitle}}</div>

        <!--主要内容-->
        <div class="content" id="attention_gift">
            <!--banner图-->
            <div class="banner">
                <el-carousel trigger="click" arrow="always">
                    <el-carousel-item v-for="banner in banner">
                        <a :href="banner.href" :style="banner.style"></a>
                    </el-carousel-item>
                </el-carousel>
            </div>

            <div class="content_block">

                <div class="check-all clearfix">
                    <i></i>
                    <span>请选择您喜欢的礼品</span>
                    <span class="check-all-btn">
                        <el-checkbox :indeterminate="false" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
                    </span>
                </div>

                <!--礼物列表-->
                <div class="gift-list">
                    <el-checkbox-group v-model="checkgifts" @change="handleCheckgiftsChange">
                        <el-checkbox v-for="gifts in gifts" :label="gifts.id">
                            <div class="gift-info">
                                <p>{{gifts.title}}</p>
                                <span>{{gifts.date}}</span>
                            </div>
                            <div class="gift-look">
                                <a :href="gifts.href"><i>查看<br/>说明</i></a>
                                <i class="circle up"></i>
                                <i class="circle down"></i>
                            </div>
                        </el-checkbox>
                    </el-checkbox-group>
                </div>

                <div class="foot-btn" @click="submit()">提交</div>
            </div>
        </div>
    </div>
</body>

<script src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
    less = {
        env: "development",
        async: false,
        fileAsync: false,
        poll: 1000,
        functions: {},
        dumpLineNumbers: "comments",
        relativeUrls: false,
        rootpath: ":/a.com/"
    };
</script>
<script src="js/less.js"></script>
<script src="js/pm2rem.js"></script>
<!--<script src="js/common.js"></script>-->
<!-- import Vue before Element -->
<script src="js/vue_2.5.17.js"></script>
<!-- import JavaScript -->
<script src="js/element_2.4.7.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function() {
            return {
                headTitle:'关注礼包',//标题
                banner:[//banner图
                    {
                        style:{
                            background:'url("image/banner_img.png") center no-repeat',
                            backgroundSize:'cover'
                        },
                        href:'https://www.baidu.com'
                    },
                    {
                        style:{
                            background:'url("image/banner_img.png") center no-repeat',
                            backgroundSize:'cover'
                        },
                        href:'https://www.baidu.com'
                    },
                ],

                checkAll: false,//是否全选
                checkgifts:['1','2'],//当前选中的id
                giftsAll:['1','2','3'],//列表数据的所有id
                gifts:[//列表数据
                    {
                        id:'1',
                        title:'SOS国内国际救援服务',
                        date:'有效期:90天',
                        href:'https://www.baidu.com'
                    },
                    {
                        id:'2',
                        title:'中粮健康生活优惠券',
                        date:'有效期:90天',
                        href:'https://www.baidu.com'
                    },
                    {
                        id:'3',
                        title:'特仑苏牛奶优惠券',
                        date:'有效期:90天',
                        href:'https://www.baidu.com'
                    }
                ]
            }
        },
        methods: {
            handleCheckAllChange:function(val) {//点击全选按钮执行操作
                this.checkgifts = val ? this.giftsAll : [];
            },
            handleCheckgiftsChange:function(value) {//点击单选按钮执行操作，判断个数是否相等
                var checkedCount = value.length;
                this.checkAll = checkedCount === this.gifts.length;
            },
            submit:function(){// 点击提交
                var checkIds = this.checkgifts;
                if(checkIds.length>0){
                    alert("您选择了"+this.checkgifts.length+'个礼品,提交成功');
                }
                else{
                    alert("请选择您喜欢的礼品");
                }
            }
        }
    });

</script>

</html>